<template>
	<view class="list acea-row row-between-wrapper">
		<view class="item" hover-class="none" @click="goDetail(item)">
			<view class="pictrue">
				<!-- <easy-loadimage
					:image-src="item.image"
					mode="aspectFit"
				></easy-loadimage> -->
				<GoodsImage :image-src="item.image" mode="aspectFit" />
			</view>
			<view class="texts">
				<view class="money acea-row row-between-wrapper">
					<view>
						<text class="num">
							<statistic :value="item.price" :currency="item.currency" />
						</text>
						<text class="unit" v-show="item.unitName">
							/
							<!-- {{ item.unitName }} -->
							{{ $util.translateUnit() }}
						</text>
						<view class="sold"
							>{{ Math.floor(item.sales) + Math.floor(item.ficti) || 0 }}
							{{ $t(`message.tips.sold`) }}</view
						>
					</view>
				</view>
				<view class="name">{{ item.storeName }}</view>
				<!-- <view class='couponActivity'>$500</view> -->
			</view>
		</view>
	</view>
</template>

<script>
import statistic from "@/components/statistic";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import { goShopDetail } from "@/libs/order.js";
import GoodsImage from "@/components/easy-loadimage/goods-image.vue";
export default {
	components: { statistic, GoodsImage },
	props: {
		item: {
			type: Object,
			require: true,
		},
		type: {
			type: Number,
			default: 0,
		},
		isStore: {
			type: [String, Number],
			default: "1",
		},
		isLogin: {
			type: Boolean,
			require: false,
		},
	},
	data() {
		return {};
	},
	computed: {
		...mapState(useAppStore, ["currency"]),
	},
	methods: {
		// 去详情页
		goDetail(item) {
			goShopDetail(item);
		},
		goShop(id) {
			this.$emit("goShop", id);
		},
		authOpen() {
			this.$emit("authOpen");
		},
		followToggle(item) {
			this.$emit("followToggle", item);
		},
		addCart(item) {
			this.$openCart();
		},
	},
};
</script>
<style lang="scss" scoped>
.sold {
	font-size: 24rpx;
	color: #0a0a0c;
	margin-top: 4rpx;
	margin-bottom: 16rpx;
}

.list .item .pictrue,
.easy-loadimage,
image,
uni-image {
	position: relative;
	width: 100%;
	height: 340rpx;
	border-radius: 20rpx 20rpx 0 0;
	overflow: hidden;

	:v-deep {
		image,
		.easy-loadimage,
		uni-image {
			height: 274rpx;
			border-radius: 20rpx 20rpx 0 0;
		}
	}
}

.list {
	.item {
		width: 100%;

		.pictrue image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx 20rpx 0 0;
			overflow: hidden;
		}
	}

	.texts {
		padding: 16rpx 0 0;
		font-size: 30rpx;
		color: #222;

		.name {
			font-size: 26rpx;
			line-height: 30rpx;
			font-weight: 550;
			color: #333333;
			margin-bottom: 8rpx;
			height: 60rpx;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}

		.money {
			.num {
				font-size: 32rpx;
				font-weight: 600;
				@include price_color(theme);
			}

			.unit {
				font-size: 22rpx;
				color: $jcg-font-color-assist;
			}

			.y-money {
				font-size: 26rpx;
				color: $jcg-font-color-assist;
				text-decoration: line-through;
				margin-left: 14rpx;
			}

			.addCart {
				width: 44rpx;
				height: 44rpx;
				border-radius: 44rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				@include main_bg_color(theme);

				.iconfont {
					color: #fff;
					font-size: 20rpx;
				}
			}
		}
	}
}
</style>
